<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom: 20px;">
      <el-breadcrumb-item :to="{ path: '/' }">投资管理</el-breadcrumb-item>
      <el-breadcrumb-item>投资商投资</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row style="text-align: right; ">
        <el-button type="danger" @click="investDialog">进行投资</el-button>
      </el-row>
      <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="租车统计图" name="first">
            <div id="main" style="width:900px ;height:600px;"></div>
          </el-tab-pane>
          <el-tab-pane label="投资统计图" name="second">
            <div id="maintwo" style="width:900px ;height:600px;"></div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-card>
    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-form
        :model="addForm"
        :rules="rules"
        ref="addFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="车辆类型" prop="models">
          <el-select v-model="addForm.models" placeholder="请选择车辆类型" style="width: 100%;">
            <el-option v-for="(item, index) in carModel" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投资金额" prop="cash">
          <el-input v-model="addForm.cash"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cashClick">投 资</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
const echarts = require("echarts");
export default {
  props: {},
  data() {
    return {
      dialogVisible: false,
      addForm: {},
      rules: {
        models: [
          { required: true, message: "请选择车辆类型", trigger: "change" }
        ],
        cash: [{ required: true, message: "请输入投资金额", trigger: "blur" }]
      },
      pieData: [
        { name: "特斯拉", value: 0 },
        { name: "吉利", value: 0 },
        { name: "比亚迪", value: 0 },
        { name: "长安汽车", value: 0 },
        { name: "威马", value: 0 },
        { name: "广汽新能源", value: 0 },
        { name: "荣威", value: 0 }
      ],
      total: 0,
      all: 0,
      form: {},
      filtersData: [],
      activeName: "first"
    };
  },
  mounted() {
    // nextTick是微任务，他会让这个函数在整个页面全部完成后才去执行，不然会报错
    this.$nextTick(function() {
      this.getList();
    });
  },
  computed: {
    ...mapState(["carModel", "userInfo"])
  },
  methods: {
    investDialog() {
      this.dialogVisible = true;
    },
    cashClick() {
      let obj = {
        name: this.userInfo.name,
        number: this.userInfo.number,
        telephone: this.userInfo.telephone,
        cash: this.addForm.cash,
        models: this.addForm.models,
        createTime: new Date().getTime()
      };
      console.log(obj, "数据不对");
      this.$api.post("/api/invest/add", obj).then(res => {
        this.$message.success("投资成功");
        this.dialogVisible = false;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    async getList() {
      const carList = await this.$api.get("/api/cappoint/list/all");
      this.pieData.forEach(item => {
        carList.data.data.forEach(items => {
          if (item.name === items.models) {
            item.value += items.count;
          }
        });
      });
      console.log(this.pieData);
      this.getPie();
    },
    handleClick(tab, event) {
      if (tab.name === "first") {
        this.getList();
        this.pieData = -[
          { name: "特斯拉", value: 0 },
          { name: "吉利", value: 0 },
          { name: "比亚迪", value: 0 },
          { name: "长安汽车", value: 0 },
          { name: "威马", value: 0 },
          { name: "广汽新能源", value: 0 },
          { name: "荣威", value: 0 }
        ];
      } else {
        this.getListTwo();
        this.pieData = [
          { name: "特斯拉", value: 0 },
          { name: "吉利", value: 0 },
          { name: "比亚迪", value: 0 },
          { name: "长安汽车", value: 0 },
          { name: "威马", value: 0 },
          { name: "广汽新能源", value: 0 },
          { name: "荣威", value: 0 }
        ];
      }
    },
    async getListTwo() {
      const packageList = await this.$api.get("/api/invest/list/all");
      this.pieData.forEach(item => {
        packageList.data.data.forEach(items => {
          if (item.name === items.models) {
            item.value += items.cash;
          }
        });
      });
      console.log(this.pieData);
      this.getPieTwo();
    },
    getPieTwo() {
      // 绘制图表
      var myChart = echarts.init(document.getElementById("maintwo"));
      // 指定图表的配置项和数据
      var option = {
        //标题
        title: {
          text: "各车辆类型的投资金额统计图",
          x: "left" //标题位置
          // textStyle: { //标题内容的样式
          //   color: '#000',
          //   fontStyle: 'normal',
          //   fontWeight: 100,
          //   fontSize: 16 //主题文字字体大小，默认为18px
          // },
        },
        // stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c} ({d}%)"
        },
        //图例
        legend: {
          //图例  标注各种颜色代表的模块
          // orient: 'vertical',//图例的显示方式  默认横向显示
          bottom: 10, //控制图例出现的距离  默认左上角
          left: "center", //控制图例的位置
          // itemWidth: 16,//图例颜色块的宽度和高度
          // itemHeight: 12,
          textStyle: {
            //图例中文字的样式
            color: "#000",
            fontSize: 16
          },
          data: [
            "特斯拉",
            "吉利",
            "比亚迪",
            "长安汽车",
            "威马",
            "广汽新能源",
            "荣威"
          ] //图例上显示的饼图各模块上的名字
        },
        //饼图中各模块的颜色
        color: [
          "#3CBCA2",
          "#1CD238",
          "#b649de",
          "#c699eb",
          "#366697",
          "#456456",
          "#ef6451"
        ],
        // 饼图数据
        series: {
          // name: 'bug分布',
          type: "pie", //echarts图的类型   pie代表饼图
          radius: "80%", //饼图中饼状部分的大小所占整个父元素的百分比
          center: ["50%", "50%"], //整个饼图在整个父元素中的位置
          // data:''               //饼图数据
          data: this.pieData,
          itemStyle: {
            normal: {
              label: {
                show: true //饼图上是否出现标注文字 标注各模块代表什么  默认是true
                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
              },
              labelLine: {
                show: true //官网demo里外部标注上的小细线的显示隐藏    默认显示
              }
            }
          }
        }
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getPie() {
      // 绘制图表
      var myChart = echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      var option = {
        //标题
        title: {
          text: "各车辆类型的使用天数统计图",
          x: "left" //标题位置
          // textStyle: { //标题内容的样式
          //   color: '#000',
          //   fontStyle: 'normal',
          //   fontWeight: 100,
          //   fontSize: 16 //主题文字字体大小，默认为18px
          // },
        },
        // stillShowZeroSum: true,
        //鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: "item",
          formatter: "{b}:{c} ({d}%)"
        },
        //图例
        legend: {
          //图例  标注各种颜色代表的模块
          // orient: 'vertical',//图例的显示方式  默认横向显示
          bottom: 10, //控制图例出现的距离  默认左上角
          left: "center", //控制图例的位置
          // itemWidth: 16,//图例颜色块的宽度和高度
          // itemHeight: 12,
          textStyle: {
            //图例中文字的样式
            color: "#000",
            fontSize: 16
          },
          data: [
            "特斯拉",
            "吉利",
            "比亚迪",
            "长安汽车",
            "威马",
            "广汽新能源",
            "荣威"
          ] //图例上显示的饼图各模块上的名字
        },
        //饼图中各模块的颜色
        color: [
          "#3CBCA2",
          "#1CD238",
          "#b649de",
          "#c699eb",
          "#366697",
          "#456456",
          "#ef6451"
        ],
        // 饼图数据
        series: {
          // name: 'bug分布',
          type: "pie", //echarts图的类型   pie代表饼图
          radius: "60%", //饼图中饼状部分的大小所占整个父元素的百分比
          center: ["50%", "50%"], //整个饼图在整个父元素中的位置
          // data:''               //饼图数据
          data: this.pieData,
          itemStyle: {
            normal: {
              label: {
                show: true //饼图上是否出现标注文字 标注各模块代表什么  默认是true
                // position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
              },
              labelLine: {
                show: true //官网demo里外部标注上的小细线的显示隐藏    默认显示
              }
            }
          }
        }
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.$emit("handle");
        })
        .catch(_ => {});
    },
    resetVisible() {
      this.$emit("handle");
    }
  },
  watch: {}
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>